<template>
    <div style=" width:999px;float:left;min-height:500px;border-left: 1px solid #f4f4f4;">

        <div style="width:100%;min-height:40px;color:#222222;display:flex;margin-left:20px;margin-top:20px;">
            <h1>新番分组</h1>
        </div>

        <div class="el-divider el-divider--horizontal" style="margin-bottom: 15px !important;"></div>
        <!--        <el-divider style="padding-bottom:10px !important;"></el-divider>-->

        <div style="width:100%;height:50px;">
            <div style="float:right;width:120px;padding-left:5px;">
                <el-button type="primary" @click="dialogVisible=true">新增分组</el-button>
            </div>
            <div style="float:right;width:300px;">
                <el-input placeholder="输入分组名进行查询" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>

        <el-table
            :data="videoFenzuOptions"
            border
            style="width: 100%">
            <el-table-column
                prop="fenzuId"
                label="分组Id"
                width="100">
            </el-table-column>
            <el-table-column
                prop="fenzuName"
                label="分组名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="fenzuStatus"
                label="分组状态"
                width="100">
            </el-table-column>

            <el-table-column
                prop=""
                label="操作">
                <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="deleteRow(scope.$index, videoFenzuOptions)"
                        type="text"
                        size="small">
                        失效分组
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            title="新增分组"
            :visible.sync="dialogVisible"
            width="30%">

            <el-form label-width="100px">
                <el-form-item label="请输入分组名:">
                    <el-input v-model="newFenzuName"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible=false;doAddNewFenzu()">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "xinfanFenzu",
        data(){
            return{
                videoFenzuOptions:null,
                dialogVisible:false,
                newFenzuName:''
            }
        },
        mounted() {
            var self = this;
            self.$api.get('video-service/fenzuController/getXinfanFenzu',null,result=>{
                self.videoFenzuOptions = result;
            });
        },
        methods:{
            deleteRow(index, videoFenzuOptions){
                debugger;
            },
            doSearchTable(){
                var self = this;
                self.$api.get('video-service/fenzuController/getXinfanFenzu',null,result=>{
                    self.videoFenzuOptions = result;
                });
            },
            doAddNewFenzu(){
                var self = this;
                var form = new Object();
                form.newFenzuName = self.newFenzuName;
                self.$api.get('video-service/fenzuController/addNewXinfanFenzu',form,result=>{
                    if(result=='ADD_XINFAN_FENZU_SUCCESS'){
                        //刷新表格
                        self.doSearchTable();
                        self.$notify({
                            title: '添加新番分组成功',
                            message: '添加新番分组成功.',
                            type: 'success',
                            position: 'bottom-right'
                        });
                        //显示提示
                    }

                    // self.videoFenzuOptions = result;
                    // debugger;
                });

            }
        }
    }
</script>

<style scoped>

</style>
